<template>
  <div class="juzhong h-full">
    <slot name="load" v-if="$slots.load && state==='load'"></slot>
    <div v-if="!$slots.load && status==='load'" class="w-full h-full juzhong ">
      <Icon color="green" size="48" class="animate-spin">
        <Loading3QuartersOutlined/>
      </Icon>
    </div>
    <img :src="prop.src" v-show="status==='success'" @error="change('error')" @load="change('success')"
         :style="{'object-fit': 'contain'}" class="w-full h-full">
    <slot name="error" v-if="status==='error'&& $slots.error"></slot>
    <div v-if="status==='error' &&!$slots.error" class="juzhong w-full h-full">
      <Icon color="gray" size="48">
        <HideImageFilled/>
      </Icon>
    </div>
  </div>
</template>

<script setup>
import {defineProps, ref} from "vue"
import {Icon} from '@vicons/utils' // 外壳
import {Loading3QuartersOutlined} from "@vicons/antd" // 加载图标
import {HideImageFilled} from "@vicons/material"    // 错误图标
const prop = defineProps({
  src: {
    default: "",
    type: String,
  },
  fit: {
    default: "contain",
    type: String,
    validator(value) {
      return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(value)
    },
  },
  errorurl: {
    type: String,
    default: "",
  },
  loadurl: {
    type: String,
    default: "",
  },
})
const status = ref("load")
const change = (jieguo) => {
  console.log(jieguo, "成了没？")
  status.value = jieguo
}
</script>

<style scoped>

</style>
